<template>
  <div v-loading="loading">
    <create-sections
      title="本周问题记录"
      class="wk-base-detail__section"
      content-height="auto">
      <el-table
        v-loading="loading"
        id="brand-table"
        :row-height="40"
        :data="issueList"
        use-virtual
        class="n-table--border el-table-header--white"
        stripe
        height="600"
        border
        highlight-current-row
        style="width: 100%">
        <el-table-column
          v-for="(item, index) in issueFields"
          :key="index"
          :prop="item.fieldName"
          :label="item.name"
          :min-width="item.width ? item.width : ''"
          :formatter="fieldFormatter"
          align="center"
          show-overflow-tooltip/>
        <el-table-column
          v-if="status == 1"
          label="操作"
          fixed="right"
          width="100">
          <template slot-scope="scope">
            <el-dropdown
              trigger="click"
              @command="commandSelect($event, scope.row)">
              <i class="el-icon-more table-more" style="cursor: pointer" />
              <el-dropdown-menu slot="dropdown" style="width: 150px;">
                <el-dropdown-item
                  v-for="(item, index) in dropdownItems"
                  :key="index"
                  :icon="item.icon"
                  :command="item.command">{{ item.label }}</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </template>
        </el-table-column>
      </el-table>
      <div v-if="status == 1" slot="header" class="wk-base-detail__more" style="text-align: right; width: 100%;">
        <el-button type="primary" icon="el-icon-plus" circle @click="commandSelect('add')" />
      </div>
    </create-sections>

    <form-add-dialog
      ref="formAdddialog"
      :title="formAddTitle"
      :form.sync="formAddForm"
      :rules="formAddRules"
      :fields="formAddFields"
      :visible.sync="formAddDialogShow"
      @pass="uploadEmployeeRelativeData"
    />
  </div>
</template>

<script>
import {
  reportIssueListQueryAPI,
  reportIssueAddOrUpdateAPI,
  reportIssueDeleteAPI
} from '@/api/oa/reportIssue'

import CreateSections from '@/components/CreateSections'
import FormAddDialog from './FormAddDialog'

import {
  issueModel,
  issueTypeOptions
} from '../model/report'
import { objDeepCopy } from '../../../../utils'

export default {
  name: 'ReportStore',
  components: {
    CreateSections,
    FormAddDialog
  },
  props: {
    id: {
      type: [String, Number],
      required: true
    },
    status: [String, Number]
  },
  data() {
    return {
      loading: false,
      issueList: [],
      issueFields: [],
      // 弹窗添加
      formAddTitle: '',
      formAddForm: {},
      formAddRules: {},
      formAddFields: [],
      formAddDialogShow: false,
      dropdownItems: [{
        label: '编辑',
        command: 'update',
        icon: 'wk wk-icon-modify'
      }, {
        label: '删除',
        command: 'delete',
        icon: 'wk wk-delete'
      }]
    }
  },
  computed: {},
  watch: {
    id: {
      handler() {
        this.getDetail()
      },
      immediate: true
    }
  },
  mounted() {
  },

  beforeDestroy() {
  },
  methods: {
    /**
     * 获取基础信息
     */
    getDetail() {
      this.loading = true
      reportIssueListQueryAPI(this.id)
        .then(res => {
          const data = res.data || []
          this.issueList = data
          this.issueFields = this.getCommonFieldListValue()
          this.loading = false
        }).catch(() => {
          this.loading = false
        })
    },

    /**
     *常规字段值
     */
    getCommonFieldListValue() {
      const list = []
      issueModel.field.forEach(item => {
        const temp = {}
        temp.fieldName = item.field
        temp.name = item.label
        list.push(temp)
      })
      return list
    },

    /**
     * 格式化字段
     */
    fieldFormatter(row, column) {
      if (column.property == 'type') {
        return issueTypeOptions.find(item => item.value == row[column.property]).label || '--'
      } else {
        return row[column.property] == null ? 0 : row[column.property] || '--'
      }
    },

    /**
     * 提交数据
     */
    uploadEmployeeRelativeData() {
      const param = objDeepCopy(this.formAddForm)
      param.reportId = this.id
      reportIssueAddOrUpdateAPI(param).then(res => {
        this.$message.success(`${this.formAddTitle}成功`)
        this.formAddDialogShow = false
        this.getDetail()
      }).catch(() => {
        this.formAddDialogShow = false
      })
    },

    /**
     * 编辑删除操作
     */
    commandSelect(command, data) {
      if (command == 'delete') {
        this.$confirm('确定要删除吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          reportIssueDeleteAPI(data.id).then(res => {
            this.$message({
              type: 'success',
              message: '删除成功'
            })
            this.getDetail()
          }).catch(() => {})
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消操作'
          })
        })
      } else if (command == 'update') {
        this.formAddForm = objDeepCopy(data)
        this.formAddDialogShow = true
        this.formAddTitle = '编辑问题记录'
        this.formAddRules = issueModel.rule
        this.formAddFields = objDeepCopy(issueModel.field)
        this.formAddFields.forEach(item => {
          item.name = item.label
        })
        this.formAddDialogShow = true
      } else if (command == 'add') {
        this.formAddForm = objDeepCopy(issueModel.form)
        this.formAddTitle = '新增问题记录'
        this.formAddRules = issueModel.rule
        this.formAddFields = objDeepCopy(issueModel.field)
        this.formAddFields.forEach(item => {
          item.name = item.label
        })
        this.formAddDialogShow = true
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.base-add-button {
  width: 100%;
  margin: 10px 0;
  padding: 11px 12px;
}

.wk-base-detail-section + .wk-base-detail-section {
  border-top: 1px solid $xr-border-color-base;
}

.create-sections {
  /deep/ .create-sections-content {
    padding: 0 20px;
  }
}

.contract-files {
  width: 80%;
  margin: 20px 0 20px 10px;
}
</style>
